import React, { Component } from 'react';
import "../../styles/Index/Allgood.scss"

import { MoreOutline } from 'antd-mobile-icons'
import { SearchBar } from "antd-mobile"

import * as service from '../../api/index'


class Allgood extends Component {
    constructor(props) {
        super(props);
        this.state = {
            good_list: []
        }
    }
    componentDidMount() {
        service.good_list({ id: this.props.location.state.id }).then(res => {
            // console.log(res.data);
            this.setState({
                good_list: res.data.list
            })
        })
    }
    toDetail(id){
        this.props.history.push({ pathname:'/detail', state:{id}})
    }
    render() {
        return (
            <div className='allgood'>
                <div className="head">
                    <div className='header'>
                        <span>全部商品</span>
                        <div className='you'><MoreOutline fontSize={38} /></div>
                    </div>
                    <div className='search'><SearchBar placeholder='搜索店铺内商品' /></div>
                    <div className="nav"></div>
                </div>
                <div className='goods'>
                    {
                        this.state.good_list.map((item, index) => {
                            return (
                                <div className="good" key={index} onClick={()=>{this.toDetail(item.id)}}>
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.name}</div>
                                    <div className="price">原价 ￥{item.salesPrice.value}</div>
                                    <span>现价 ￥{item.salesPrice.value}</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Allgood;